import React, { useEffect } from "react";
import Alert from "@mui/material/Alert";
import "./index.less";
import { useDispatch, useSelector } from "react-redux";

export default function Toast() {
  const { isShow, type, message } = useSelector(
    (state: IRootState) => state.toastData
  );
  const dispatch = useDispatch();
  useEffect(() => {
    if (!isShow) return;
    setTimeout(() => {
      dispatch({ type: "Toast_Hide" });
    }, 2000);
  }, [isShow]);
  return (
    <div className="toast" style={{ display: isShow ? "block" : "none" }}>
      <Alert severity={type}>{message}</Alert>
    </div>
  );
}

// function state(
//   state: any,
//   arg1: (IRootState: unknown) => any
// ): { isShow: any; message: any; type: any } {
//   throw new Error("Function not implemented.");
// }
